<!-- 木制品产量占比 -->
<template>
  <div class="content-product">
    <div class="title"></div>
    <div class="minpng">
      <div class="content">
        <img class="imgbzt" src="../images/AE饼状图-bg.png" alt="" />
        <div ref="content1" style="width: 100%; height: 100%"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "product",
  data() {
    return {
      option: {
        series: [
          {
            type: "pie",
            radius: ["35%", "57%"],
            //   avoidLabelOverlap: false,
            labelLine: {
              normal: {
                length: 40, // 指示线长度
                lineStyle: {
                  color: "#18418F", // 指示线颜色
                },
              },
            },
            itemStyle: {
              borderWidth: 2, //边框的宽度
              borderColor: "#0f2055", //边框的颜色
            },
            label: {
              normal: {
                show: true,
                formatter: "{bfb|{d}%}\n{name|{b}}", //自定义显示格式(b:name, c:value, d:百分比)
                rich: {
                  //设置标识内容样式
                  bfb: {
                    fontSize: 14,
                    fontFamily: "PangMenZhengDao",
                    fontStyle: "oblique",
                  },
                  name: {
                    fontSize: 11,
                    fontFamily: "NotoSansHans-Regular",
                    fontStyle: "oblique",
                    color: "#8FB9FF",
                    //设置变量ng的颜色，即设置{c}的颜色
                  },
                },
              },
            },

            data: [
              {
                value: 55,
                name: "工艺木制品",
                itemStyle: { color: "#005DFA" },
              },
              {
                value: 9,
                name: "高科技木制品",
                itemStyle: { color: "#00E9CB" },
              },
              {
                value: 10,
                name: "园艺木制品",
                itemStyle: { color: "#44DA84" },
              },
              {
                value: 12,
                name: "生活木制品",
                itemStyle: { color: "#00C6FB" },
              },
              {
                value: 24,
                name: "家具木制品",
                itemStyle: { color: "#8993FD" },
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    this.initProduct();
  },
  methods: {
    initProduct() {
      this.$nextTick(function () {
        let product = this.$echarts.init(this.$refs.content1);
        product.setOption(this.option, true);

        window.addEventListener("resize", () => {
          product.resize();
        });
      });
    },
  },
};
</script>

<style scoped>
.content-product {
  background: url("~@/wood/images/patr-3.png") no-repeat;
  background-size: 100% 100%;
  height: 31.7vh;
  padding-top: 5%;

}


.content-product .title {
  background: url("~@/wood/images/title1.png") no-repeat;
  background-size: 100% 100%;
  width: 51%;
  height: 13%;
  margin-left: 4%;
}

.content-product .minpng {
  width: 100%;
  height: calc(100% - 40px);
  ;
  position: relative;

}


.content-product .minpng .content {
  height: 100%;
  /* //   background: url("~@/views/dataanalysis/projectList/wood/images/饼状图.png")
      //     no-repeat;
      //   background-position: center; */
  background-size: 37%;
}

.content-product .minpng .imgbzt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16.5vh;
  transform: translate(-50%, -50%);
  font-size: 20%;
  z-index: 999;
}
</style>